<script lang="ts" setup>
// const SUCCESS = "success"; // green
// const INFO = "info"; // grey
// const WARNING = "warning"; // yellow
// const DANGER = "danger"; // red
// const BLUE = "primary";

defineOptions({ name: "CommonTag" });

const props = withDefaults(
  defineProps<{
    value: string | number;
    labelDict?: Record<string, string>;
    colorDict?: Record<string, Custom.TagType>;
    size?: "large" | "default" | "small";
  }>(),
  {
    labelDict: () => ({}),
    colorDict: () => ({ "-1": "info", 0: "danger", 1: "success" }),
    size: "default",
  }
);

const tags = computed(() => {
  return String(props.value).split(",");
});
</script>
<template>
  <el-tag
    v-for="(item, index) in tags"
    :key="index"
    :size="size"
    class="mr-1"
    :type="colorDict[item] ?? 'primary'"
    >{{ labelDict[item] ?? item }}
  </el-tag>
</template>
<style lang="scss" scoped></style>
